<template>
  <!--
        loading:   是否加载中, 默认是false
                  1. 如果loading为true的时候，van-list组件不会调用onLoad
                  2. loading为true，van-list组件内部自动会展示一个加载中

        finished:  是否所有数据加载完毕，默认是false
                  1.如果finished为true的时候，van-list组件不会调用onLoad
                  2. finished为true， 底部还会呈现一个所有数据加载完毕

        finished-text: 所有数据加载完毕之后在底部呈现的提示文本
        list:      存放列表数据

        onLoad:    用来加载数据的事件处理函数：负责调接口，拿数据，并且把数据丢到数组变量的尾部
                  1. 实例化van-list组件的时候会自动调用onLoad直到数据铺满屏幕
                  3. 上拉触底的时候，如果finished为false，会自动调用onLoad
                  2. van-list组件自动调用onLoad的时候，会自动的把loading设置为true

                onLoad中要完成的六件事情
                 1. 调接口拿到当前页数据
                 2. 把数据放到list的尾部
                 3. 把loading设置为false
                 4. 判断有没有下一页的数据
                 5. 如果有下一页数据，修改分页标识
                 6. 如果没有下一页数据，就把finished设置为true
     -->
  <div class="box">
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh"
   
      success-text="刷新成功">

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="还没看够？"
      @load="onLoad"
       :error.sync="error"
       error-text="请求失败，点击重新加载"
    >
     <article-list v-for="obj in list" :key="obj.art_id"
     :obj='obj'
     ></article-list>
      <!-- <van-cell v-for="item in list" :key="item.art_id" :title="item.title" /> -->
    </van-list>
     
    </van-pull-refresh>
  </div> 
</template>

<script>
import {getArticles} from '@/api/article'
import articleList from './article-list.vue';
export default {
  components: { articleList },
  name: "article-item",
  props: {
    obj: {
      typeof: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      time : null,
      error : false,
      refreshing: false,
    };
  },
  methods: {
    async onLoad() {
   try {
      const res =  await getArticles({
      channel_id: this.obj.id,
      timestamp : this.time || Date.now(),
      with_top : 1
     })
    //  if(Math.random()>0.5) {
    //   JSON.parse('ABC')
    //  }
     this.list.push(...res.data.results)
     this.loading=false
     if(res.data.pre_timestamp) {
      this.time = res.data.pre_timestamp
     }else{
      this.finished = true
     }
   } catch (error) {
    console.log(1);
    this.loading = false
    this.error = true
   }
    },
    onRefresh () {
      // 下拉刷新是要做的几件事情
      // 1. 清空重置数据
      this.loading = true
      this.list = []
      this.finished = false
      this.timestamp = null
      // 2. 调用onLoad
      this.onLoad()
      // 3. refreshing
      this.refreshing = false
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  height: calc(100vh - 188px);
  overflow: auto;
  margin-top: 88px;
}
</style>